<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>购物车</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8' defer></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8' defer></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'defer></script>
    <script type='text/javascript' src="js/cart.js" defer></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        li{
            list-style-type:none;
        }
        a{
            text-decoration:none;
        }
        p{
            margin: 0 0;
        }
        img{
            vertical-align:middle;
        }
        .fl{
            float:left;
        }
        .fr{
            float:right;
        }
        .clearfix:after{
            content:"";
            display:table;
            clear:both;
        }
        html,body{
            width: 100%;
            height: 100%;
        }


        #emptyCar{
            font-size: .7rem;
        }
        #emptyCar>div{
            margin: 3.6rem 0;
        }
        #emptyCar>div p{
            margin-top: 0.6rem;
            text-align: center;
        }
        #emptyCar>div p:nth-of-type(2){
            font-size: 0.6rem;
            color: #999999;
        }
        /*头部*/
        .bar{
            background-image: linear-gradient(225deg, rgb(254, 86, 10) 3%, rgb(255, 153, 1) 100%);
        }
        .title{
            color:white;
        }
        /*内容*/
        .content{
            height: 21.6rem;
        }
        .product{
            display:flex;
            align-items: center;
            justify-content: center;
            font-size:12px;
        }
        .inputs{
            display: flex;
            justify-content: space-between;

        }
        .inputs input[name="amount"]{
            width: 45px;
            text-align: center;
            border: 1px solid #999999;
            border-left: none;
            border-right: none;
            height: 21px;
        }
        .inputs input[name="minus"],.inputs input[name="plus"]{
            height: 25px;
            border: 1px #999999 solid;
            width: 25px;
            text-align: center;
        }
        .titleDiv{
            margin-top:-.5rem;
        }
        .product>*{
            margin:.2rem;
        }
        .product div img{
            width: 10%;
            height: 10%;
        }
        /*底部样式*/
        .bottom{
            position: fixed;
            bottom: 0px;
            right: 0px;
            width: 100%;
            height: 2.4rem;
            background:white;
            border-top: 1px solid #cccccc;
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
        }
        .bottom a{
            color: #333333;
            width: 2rem;
        }
        .bottom a:active{
            text-decoration:none;
        }
        .bottom a img{
            width: 55%;
            display: block;
            margin: 0 auto;
        }
        .bottom p{
            font-size: 12px;
            text-align: center;
            line-height: 0.8rem;
        }
        #bottom2{
            position: fixed;
            height: 2.2rem;
            bottom: 2.4rem;
            line-height: 2.2rem;
            width: 100%;

        }
        .bottom2 p{
            display: inline-block;
            margin-right: 1rem;
        }
        .bottom2 p:last-of-type span{
            color: orangered;
        }
        .bottom2 div{
            width: 30%;
            display: inline-block;
            height: 2.2rem;
            background: rgb(254, 86, 10);
            color: white;
            float: right;
            text-align: center;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav">
            <h1 class="title" id="shopCarCount">购物车(0)</h1>
        </header>
        <!-- 你的html代码 -->
        <!-- class="content" 可以出现滚动条 -->
        <div class="content">


            <div id="shopCarDiv">

            </div>
            <div id="emptyCar" style="display:none;">
                <div>
                    <div style="width: 25%;height: 25%;margin: 0 auto">
                        <img src="images/空空.png" width="100%" />
                    </div>
                    <p>什么，购物车竟然是空的？</p>
                    <p>再忙，也要记得买点什么犒劳自己~</p>
                </div>
            </div>

        </div>


        <div id="bottom2" class="bottom2" style="display: flex">
            <p>
                <img width="20" id="allSelectImg" src="" style="vertical-align: middle" />
                <span>全选</span>
            </p>
            <p>合计:&nbsp;<span id="totalPrice">&yen;0.00</span></p>
            <div id="tijiaoBtn">提交订单</div>
        </div>
        <div class="bottom">
            <a href="index.html">
                <img src="images/首页.png"><p>首页</p>
            </a>
            <a href="category.html">
                <img src="images/分类.png"><p>分类</p>
            </a>
            <a>
                <img src="images/购物车.png"><p>购物车</p>
            </a>
            <a>
                <img src="images/我的.png"><p>我的</p>
            </a>
        </div>
    </div>


</div>




</body>
</html>